<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>按申报单位汇总统计分析</title>
    <script src="/../WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="/../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="/../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="/../WF/Comm/Gener.js" type="text/javascript"></script>

    <script src="../js/echarts.min.js"></script>
    <script src="/../WF/Scripts/layui/layui/layui.js"></script>
    <link href="/../WF/Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-table th {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-panel">
                    <div class="layui-card">
                        <div class="layui-card-header layui-font-18"><strong>按申报单位汇总统计分析-数量</strong></div>
                        <div class="layui-card-body">
                            <div id="main1" style="width: 100%;height: 200px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-panel">
                    <div class="layui-card">
                        <div class="layui-card-header layui-font-18"><strong>按申报单位汇总统计分析-金额</strong></div>
                        <div class="layui-card-body">
                            <div id="main2" style="width: 100%;height: 200px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-panel">
                    <div class="layui-card">
                        <div class="layui-card-header layui-font-18"><strong>按申报单位汇总统计分析-年度</strong></div>
                        <div class="layui-card-body">
                            <table lay-even lay-skin="line" lay-size="lg" id="table1" class="layui-table" lay-filter="btnevent">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var webUser = new WebUser();
        //页面启动函数
        $(function () {
            var handler = new HttpHandler("BP.PM.AppHandler");
            var data = handler.DoMethodReturnJSON("TongJiFenXiTu_Init");

            //渲染按申报单位汇总统计分析-年度
            layui.table.render({
                elem: '#table1',
                data: data.Dept,
                cols: [[
                    { type: 'numbers', title: '序', align: 'left' }
                    , { field: 'NianDu', title: '年度', align: 'left' }
                    , { field: 'Name', title: '提报单位', align: 'left' }
                    , { field: 'Value', title: '项目数量', align: 'left' }
                    , { field: 'Money', title: '预算金额合计(万元)', align: 'left' }
                ]],
                limit: data.Dept.length,
                id: 'dept',
                done: function (res) {
                    $('.layui-table-page').css('text-align', 'right');
                    $(".layui-table-tool-self").hide();//隐藏打印
                }
            });

            JSONKeyLowerCase(data.Dept);
            //渲染按申报单位汇总统计分析-数量
            var myChart = echarts.init(document.getElementById("main1"));
            DrowLine(data.Dept, 112, 76, myChart, "预算项目总数", Totalize(data.Dept), "个");
            //渲染按申报单位汇总统计分析-金额
            var myChartJinE = echarts.init(document.getElementById("main2"));
            DrowLine(JSONKeyMoney(data.Dept), 112, 76, myChartJinE, "总金额(万元)", TotalizeDecimal(JSONKeyMoney(data.Dept)), "万元");
        })
        function JSONKeyMoney(data) {
            var result = data;
            for (var i = 0; i < result.length; i++) {
                result[i].value = result[i].money;
            }
            return result;
        }
        function JSONKeyLowerCase(data) {
            for (var i = 0; i < data.length; i++) {
                for (var key in data[i]) {
                    if (key.toLowerCase() !== key) {
                        data[i][key.toLowerCase()] = data[i][key];
                        delete data[i][key];
                    }
                }
            }
        }
        function Totalize(data) {
            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total = total + Number(data[i].value);
            }
            return total;
        }
        function TotalizeDecimal(data) {
            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total = total + Number(data[i].value);
            }
            return total.toFixed(6);
        }
        function DrowLine(data, leftSize, topSize, myChart, titleText, titleSubtext, amtUnit) {
            var option = {
                title: {
                    text: '',
                    subtext: '',
                    left: leftSize,
                    top: topSize,
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 12,
                        color: '#000'
                    },
                    subtextStyle: {
                        fontWeight: 'normal',
                        fontSize: 14,
                        color: '#aaa'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}:{c}个:{d}%'
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['60%', '90%'],
                    center: ['20%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    data: []
                }],
                legend: {
                    top: 30,
                    left: 260,
                    orient: "vertical",
                    icon: "circle",
                    itemWidth: 8, // 设置宽度
                    itemHeight: 8, // 设置高度
                    itemGap: 15,
                    icon: 'roundRect',
                    data: [],
                    formatter: (name) => { //重点在这里  自定义图例
                        return getFormatter(name, data, titleSubtext, amtUnit);
                    },
                    textStyle: { //图例的样式
                        overflow: 'breakAll',
                        rich: {
                            b: {
                                fontSize: 12,
                                width: 70,
                                color: "#000",
                                fontWeight: "500"
                            },
                            d: {
                                fontSize: 12,
                                width: 60,
                                color: "#0055ff"
                            },
                            c: {
                                fontSize: 12,
                                width: 120,
                                color: "#0055ff",
                                fontWeight: "500"
                            }
                        },
                    },
                }
            };

            option.title.text = titleText;
            option.title.subtext = titleSubtext;
            option.series[0].data = data; //获取的数据赋值给图表
            option.legend.data = data;
            myChart.setOption(option);
        }
        //自定义图例的函数 用于处理每列数据
        function getFormatter(name, data, titleSubtext, amtUnit) {
            let arr = [];
            let amt, danwei, percent;
            // let data = this.CardTypeSum;
            for (const item of data) {
                if (item.name === name) {
                    danwei = item.name;
                    debugger
                    percent = ((item.value / titleSubtext) * 100).toFixed(2) + "%";
                    amt = item.value + amtUnit;
                }
            }
            //图例的四列分别对应a b c d
            arr = [
                "{b|" + danwei + "}",
                "{d|" + percent + "}",
                "{c|" + amt + "}",
            ];
            return arr.join("");
        }
    </script>
</body>
</html>
